<!--归档信息-->
<template>
  <div class="app-container">
    <div class="btn-box">
      <el-button type="primary" class="form-result" >修改</el-button>
      <el-button type="primary" class="form-result" >保存</el-button>
      <el-button type="primary" class="form-result" >归档审核</el-button>
      <el-button type="primary" class="form-result" @click="fileDeal">归档</el-button>
      <el-button type="primary" class="form-result" >附件</el-button>
    </div>
    <el-form
      ref="mainForm"
      :model="formData"
      :rules="rules"
      size="mini"
      class="editForm"
      label-width="100px"
    >
      <!--表单项-->
      <el-row>
        <el-col :span="6">
          <el-form-item label="业务编号" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="业务部门" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="货位号码" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="归档类型" prop="nickName" class="car-form-item">
            <el-select v-model="listQuery.importance" placeholder="请选择" clearable class="car-modal-col">
              <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="6">
          <el-form-item label="客户姓名" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="业务员" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="合同号码" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证件类型" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="银行放款日期" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="归档经办人" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证件号码" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="档案编号" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="归档日期" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="归档日志" prop="nickName" class="car-form-item">
            <ve-table
              :columns="columns"
              :table-data="tableData"
              row-key-field-name="id"
              :border-x="true"
              :border-y="true"
              :row-style-option="rowStyleOption"
              :checkbox-option="checkboxOptipon"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="历史日志" prop="nickName" class="car-form-item">
            <ve-table
              :columns="columns"
              :table-data="tableData"
              row-key-field-name="id"
              :border-x="true"
              :border-y="true"
              :row-style-option="rowStyleOption"
              :checkbox-option="checkboxOptipon"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="width: 98%;margin: 10px auto;">钥匙管理</el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否留存钥匙" prop="nickName" class="car-form-item">
            <el-select v-model="listQuery.importance" placeholder="请选择" clearable class="car-modal-col">
              <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="经办人" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="钥匙编号" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="储存位置" prop="nickName" class="car-form-item">
            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车资原件" prop="nickName" class="car-form-item">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司签约资料" prop="nickName" class="car-form-item">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他资料" prop="nickName" class="car-form-item">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog class="lnk-dialog"
               :close-on-click-modal="false"
               :title="dialogTitle"
               top="10vh"
               width="30%"
               :visible.sync="newDialog"
               :append-to-body="true">
      <el-form ref="mainForm" :model="formData"
               size="mini" class="editForm">
        <!--表单项-->
        <el-row>
          <el-col>
            <el-form-item label="归档说明" prop="name" class="car-form-item">
              <el-input class="car-modal-col" v-model="formData.name" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newDialog = false;$refs['mainForm'].resetFields();">取消</el-button>
        <el-button type="primary" @click="addData()">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style lang="scss" scoped>
  .table-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .btn-box{
    width: 100%;
    margin: 10px auto;
    overflow: hidden;
  }
  .right-btn{
    float: right;
  }
  .dialog-footer{
    text-align: center;
  }
  .car-modal-col{
    width: 200px;
  }
  .form-result{
    float: right;
    margin-right: 7px;
  }
</style>

<script>
  let DB_DATA = []

  export default {
    data() {
      return {
        rules: {
          name: [
            {required: true, trigger: 'blur'}
          ]
        }, // 表单校验规则
        dialogTitle: '归档',
        newDialog: false, // 添加弹框
        formData: {}, // 添加表单
        listQuery: {},
        appId: sessionStorage.getItem("appId"),
        // page index
        pageIndex: 1,
        // page size
        pageSize: 10,
        dataTable: [],
        totalCount: '',
        rowStyleOption: { // 表格样式
          stripe: true, // 斑马纹
          hoverHighlight: true, // hover高亮
          clickHighlight: true // 点击行高亮
        },
        checkboxOptipon: {
          // 行选择改变事件
          selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
            console.log(row, isSelected, selectedRowKeys)
          },
          // 全选改变事件
          selectedAllChange: ({ isSelected, selectedRowKeys }) => {
            console.log(isSelected, selectedRowKeys)
          }
        },
        columns: [
          { field: 'name', key: 'a', title: '编号', align: 'center' },
          { field: 'name', key: 'b', title: '提交人', align: 'center' },
          { field: 'date', key: 'c', title: '提交信息', align: 'center' },
          { field: 'vehiclePrice', key: 'e', title: '提交日期', align: 'center' },
          { field: 'vehiclePrice', key: 'f', title: '审核节点', align: 'center' }
        ]
      }
    },
    computed: {
      // table data
      // tableData() {
      //   const { pageIndex, pageSize } = this
      //   return DB_DATA.slice((pageIndex - 1) * pageSize, pageIndex * pageSize)
      // },
      // total count
      // totalCount() {
      //   return this.tableData.length
      // }
    },
    created() {
      this.initDatabase()
    },
    methods: {
      /**
       * 归档
       * @date 2021-05-27
       */
      fileDeal () {
        this.newDialog = true
      },
      // page number change
      pageNumberChange(pageIndex) {
        this.pageIndex = pageIndex
      },

      // page size change
      pageSizeChange(pageSize) {
        this.pageIndex = 1
        this.pageSize = pageSize
      },

      /**
       * 初始化数据
       * @date 2021-05-10
       */
      async initDatabase() {
        this.tableData = [];
        let param = {appId: await sessionStorage.getItem("appId")};
        let data = await this.$http.post('/auth/loanFormulaSetting/list/' + this.pageIndex + "/" + this.pageSize, param);
        console.log(data);
        if (data.code === 200) {
          this.tableData = data.data;
          this.totalCount = data.total;
        } else {
          this.$message({
            type: 'error',
            message: '查询失败，请刷新页面'
          });
        }
        console.log(this.tableData)
      },
      /**
       * 新增操作
       * @date 2021-05-08
       */
      async addData() {
        this.$refs['mainForm'].validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              let data = await this.$http.post('/auth/paymentName/update', this.formData)
              console.log(data);
              if (data.code === 200) {
                this.newDialog = false;
                this.initDatabase();
              } else {
                this.$message({
                  type: 'info',
                  message: '操作失败，请重试'
                });
              }
            } else {
              this.formData.appId = this.appId;
              this.formData.paymentType = this.paymentType;
              let data = await this.$http.post('/auth/paymentName/add', this.formData)
              console.log(data);
              if (data.code === 200) {
                this.newDialog = false;
                this.initDatabase();
              } else {
                this.$message({
                  type: 'info',
                  message: '操作失败，请重试'
                });
              }
            }
          }
        })
      }
    }
  }
</script>
